<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="viewport" content="width=800,user-scalable=no"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="x5-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/battle.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/town.css">
    <link rel="stylesheet" type="text/css" href="css/dialog.css">
    <script type="text/javascript" charset="utf-8" src="http://localhost:8000/socket.io/socket.io.js"></script>
</head>
<body style="padding:0; margin: 0; background: #000;">
    <div id="main" style="text-align: center;">
        <!--
        UI，覆盖于canvas之上，大小需要一致
        -->
        <div class = "gameUI">
            <!--战斗界面-->
            <div class="battleUI">
                <!--上方人物和对方卡牌栏-->
                <div id="topInfo">
                    <div id = "headerInfo">
                        <div id = "hpBoard">
                            <div id = "player1Hp">
                                <span id="hpImg1" ></span>
                                <span id="hpText1">100</span>
                            </div>
                            <div id = "player2Hp">
                                <span id="hpImg2" ></span>
                                <span id="hpText2">100</span>
                            </div>
                        </div>
                        <div id = "player1Header"></div>
                        <div id = "player2Header"></div>
                    </div>
                    <div id = "playerInfo">
                        <div id = "player1Info">
                            <span id="player1Name">木下藤吉郎</span>
                            <span id="player1Wuli">59</span>
                        </div>
                        <div id = "player2Info">
                            <span id="player2Wuli">57</span>
                            <span id="player2Name">池田恒兴</span>
                        </div>
                    </div>
                </div>
                <!--卡牌上方信息栏-->
                <div id="middleInfo">

                </div>
                <!--菜单按钮-->
                <div id="menu">
                    <div id="acceptButton" class="disable"></div>
                    <div id="attackOrDefenseButton" class="enable"></div>
                    <div id="escapeButton" class="disable"></div>
                </div>
                <!--下方提示信息-->
                <div id="bottomInfo">

                </div>
            </div>
            <div class="loginUI">
                <div id="inputName">
                    <input id="name"></input>
                </div>
                <div id="inputPass">
                    <input type="password" id="pass"></input>
                </div>
                <div id="loginButton"></div>
                <div id="registerButton"></div>
            </div>
            <div class="townUI">
                <div id="top">
                    <div id="banner">
                        <span id="year">1999</span>
                        <span id="month">3</span>
                        <span id="day">5</span>
                        <span id="city">清州城</span>
                    </div>
                    <div id="funButton"></div>
                    <div id="infoButton"></div>
                </div>
                <div id="buttons">
                    <div id="wushuguan"></div>
                    <div id="wushizhaidi"></div>
                    <div id="goout"></div>
                </div>
            </div>
        </div>
        <!--窗口类
        -->
        <div class="dialogs">
            <div class="pkDialog">
                <div id="header">
                    <table id="tableHeader" cellspacing="0">
                        <tr>
                            <th class="name">姓名</th><th class="status">剑术等级</th><th class="level">武力</th><th class="win">胜利</th><th class="lost">失败</th><th class="drop">掉线</th><th class="rate">胜率</th>
                        </tr>
                    </table>
                </div>
                <div id="content">
                    <table id="tableContent" cellspacing="0">
                    </table>
                </div>
                <div class="okButton"></div>
                <div class="cancelButton"></div>
            </div>
            <div class="commonDialog">
                <div class="okButton"></div>
                <div class="cancelButton"></div>
                <div class="dialogText">XXX向您挑战，是否应战？</div>
            </div>
        </div>
        <canvas id="gameCanvas" width="800" height="600"></canvas>
    </div>
</body>
</html>
<script src="cocos2d.js"></script>